<template>
  <div id="trainList" v-loading="loading">
    <div class="main-content common-style">
      <a-tabs v-model:activeKey="activeTab" @tabClick="handleTabClick">
        <template v-for="item in tabOptions">
          <a-tab-pane :tab="item.text" v-if="item.auth" :key="item.value">
          </a-tab-pane>
        </template>
      </a-tabs>
    </div>
    <div class="card-wrap " v-if="showCard">
      <div class="card-item" v-show="item.auth" :class="[item.text == currentCard?.text ? 'card-active' : '']"
        @click="handleCardClick(item)" :style="item.style" v-for="item in cardOptions" :key="item.text">
        <span class="card-item-left">
          <div class="icon-box" :style="{ background: item.style.border }">
            <i :class="['iconfont', item.icon]"></i>
          </div>
          <div>{{ item.text }}</div>
        </span>
        <div class="card-item-right">{{ item.number || 0 }}
          <div class="unit">份</div>
        </div>
      </div>
    </div>
    <div class="campus common-style" v-if="showCampus">
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          {{ campus.label }}分校
          <CaretDownFilled />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="campusChange(item)" v-for="item in campusList" :key="item">
              <a href="javascript:;">{{ item.label }}分校</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <div class="box">
        <div class="box-item" v-for="item in detailList" :key="item.title">

          <div class="ell title-wrap">{{ item.title }}
            <a-tooltip v-if="item.tooltip">
              <template #title>
                <span class="tips" v-show="item.tooltip"> {{ item.tooltip }}</span></template>
              <i class="iconfont icon-zhushi color-#ccc"></i>
            </a-tooltip>
          </div>
          <div class="box-item-number">{{ item.number }}</div>
        </div>
      </div>
    </div>
    <div class="bottom_table common-style">
      <div v-if="showCampus" class="table-tab-wrap">
        <div :class="['table-tab-wrap-item', activeCampus === item.text ? 'active-table-tab' : '']"
          v-for="item in tableTabList" :key="item.text" @click="handleTableTabChange(item)">
          {{ item.text }}({{ item.number }})
        </div>
      </div>
      <div v-if="showTeam" class="table-tab-wrap">
        <div :class="['table-tab-wrap-item', activeTeam === item.text ? 'active-table-tab' : '']"
          v-for="item in teamList" :key="item.text" @click="handleTeamChange(item)">
          {{ item.text }}({{ item.number }})
        </div>
      </div>
      <div>
        <!-- <h2 class="title">我的{{ activeKey.replace('我的', '') }}
          <span>共{{ currentCard.number }}份</span>
        </h2> -->
        <div class="search-r">
          <span style="margin-bottom: 16px">
            <a-input class="search-input" v-model:value="keyWords" placeholder="输入姓名或手机号搜索"
              @pressEnter="searchKeyWords">
              <template #suffix>
                <img class="search-i-i" @click="searchKeyWords" src="@/assets/icon/search.svg">
              </template>
            </a-input>
            <span class="mr-4 ml-4">{{ timeTitle }}</span>
            <a-range-picker value-format="YYYY-MM-DD" v-model:value="rangeTime" @change="handleTimeChange"
              :placeholder="['开始时间', '结束时间']" />
            <Button class="search-b-r reset-btn" :loading="loading" @click="removeAll">
              <span class="color-#333">重置</span>
              <template #icon><img class="search-i-r" src="@/assets/icon/reset.svg"></template>
            </Button>
          </span>
          <span>
            <Button v-auth="'exportForm'" color="#36AF5C" class="search-b-r " :loading="loading"
              @click="getTabulationExport">
              <span class="color-#fff">导出表格</span>
              <template #icon><img class="search-i" src="@/assets/icon/export.svg"></template>
            </Button>
          </span>
        </div>
      </div>
      <div class="result-wrap" v-if="resultList.length > 0">
        <div class="inner">
          <span v-for="item in resultList" class="result-item">
            {{ item.value }}
            <CloseOutlined @click="remove(item)" />
          </span>
          <span @click="removeAll" class="result-clear">清空条件</span>
        </div>
      </div>
      <BasicTable :multiple-sort="true" rowKey="id" @register="registerTable" size="small"
        :scroll="{ x: 2000, y: yDistance }">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <span class="status-name child1" v-if="record.isRecommends === '0'">内</span>
            <span class="status-name child2" v-if="record.sendCount > 1">{{ record.sendCount }}</span>
            <span class="status-name child3" v-if="record.isException === '1'">异</span>
            <span class="user-name" @click="goApplicationDetail(record)">{{ record.name }}</span>
          </template>
          <template v-if="column.key === 'action'">
            <span v-if="activeKey == '待分配' || activeKey == '待约面'">
              <a-button v-auth="'myOfflineInterview'" size="small" type="primary"
                @click="getOfflineInterviewTypeList([record.id])"
                v-if="record.status === 'RESUME_SCREENING_IN_PROGRESS' || record.status === 'INTERVIEW_SCHEDULED' || record.status === 'ARRIVAL_SCHEDULED'">
                线下到面</a-button>
              <span v-auth="'myOfflineInterview'" @click="getOnlineInterviewType(record)"
                v-if="record.status === 'INTERVIEW_IN_PROGRESS'" class="user-name" type="primary">
                取消线下</span>
            </span>
            <span v-if="activeKey == '待面试'">
              <Button :disabled="!record.interviewUrl" color='primary' @click="openUrl(record)">面试链接</Button>
            </span>
            <span v-if="activeTab == '我的分校'">
              <Button v-auth="'waitEntryByDeatil'" v-show="activeCampus == '待入职'" @click="entrySession(record)"
                color="primary">入 职</Button>
              <Button v-auth="'probation'" v-show="activeCampus == '实习中'" @click="entryOnSession(record, 'zrsy')"
                type="primary">转入试用 </Button>
              <Button v-auth="'confirmed'" v-show="activeCampus == '试用中'" @click="entryOnSession(record, 'zz')"
                type="primary">转正</Button>
              <Button v-auth="'confirmed'" v-show="activeCampus == '待签三方'" @click="sendSession(record)"
                type="primary">完成三方</Button>
            </span>
            <span v-if="activeTab == '我的团队'">
              <Button v-auth="'probation'" v-show="activeTeam == '实习中'" @click="entryOnSession(record, 'zrsy')"
                type="primary">转入试用</Button>
              <Button v-show="activeTeam == '试用中'" @click="entryOnSession(record, 'zz')" type="primary"
                v-auth="'confirmed'">转正 </Button>
            </span>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :class="getTagClassStatus(record.status)" class="custom-tag">{{ record.status }}</a-tag>
          </template>
          <template v-if="column.key === 'educationType'">
            <Button class="graduate " :class="{ 'graduate-other': record.educationType == '1' }">
              {{ record.graduateTime ? record.graduateTime : record.educationType == '0' ? '应届生' : '往届生' }}
            </Button>
          </template>
          <template v-if="column.dataIndex === 'recommendsName'">
            {{ record.recommendsName || '无' }}
          </template>
          <template v-if="column.dataIndex === 'examineUser'">
            {{ record?.examineUser?.map(item => item.userName).join('、') || '无' }}
          </template>
          <template v-if="column.dataIndex === 'trainingUser'">
            {{ record?.trainingUser?.map(item => item.userName).join('、') || '无' }}
          </template>
        </template>
        <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, visible, clearFilters, column }">
          <div style="padding: 8px;min-width: 270px;" v-if="Object.keys(state).length > 0">
            <div class="filter-dropdown" v-if="state[column.key]">
              <div v-if="column.formType === 'input'">
                <a-input @blur='handleBlur(column)' @focus='handleFocus(column)'
                  v-model:value="state[column.key].inputValue" :placeholder="state[column.key].placeholder">
                  <template #prefix>
                    <SearchOutlined />
                  </template>
                </a-input>
                <div v-if="column.history" v-show="column.showHistory" class="history-wrap">
                  <div v-show="column.historyList?.length > 0" class="history-wrap-item"
                    @click="state[column.key].inputValue = v" v-for="v in column.historyList">
                    <span>{{ v }} </span>
                    <i class="iconfont icon-guanbi" @click.stop.prevent="removeHistory(column, v)"></i>
                  </div>
                  <div style="color:#bbb ;" v-show="column.historyList?.length === 0">
                    暂无数据
                  </div>
                </div>
              </div>

              <div v-else-if="column.formType === 'time'">
                <div class="flex" style="margin-bottom: 16px;cursor: pointer">
                  <span @click="sortChange(column, 'asc', confirm)"
                    :style="{ color: state[column.key].sort === 'asc' ? '#209EE4' : '' }">
                    <ArrowUpOutlined />正序
                  </span>
                  <span @click="sortChange(column, 'desc', confirm)"
                    :style="{ color: state[column.key].sort === 'desc' ? '#209EE4' : '' }">
                    <ArrowDownOutlined />倒序
                  </span>
                </div>
                <a-range-picker date-format="YYYY年M月D日" format="YYYY年M月D日" value-format="YYYY-MM-DD"
                  v-model:value="state[column.key].timeRange" :placeholder="['开始时间', '结束时间']"
                  style="width: 100%"></a-range-picker>
              </div>
              <div style="margin-bottom: 2px" v-else-if="column.formType === 'select'">
                <div class="reset-top">
                  <a-input :style="{ width: column.otherFormType === 'sort' ? '' : '100%' }"
                    v-if="column.otherFormType === 'search' || column.otherFormType === 'sort'" class="reset-input"
                    ref="searchInput" :placeholder="`搜索 ${column.title}`" :value="state[column.key].searchText"
                    @change="handleInputChange($event, column)">
                    <template #prefix>
                      <SearchOutlined />
                    </template>
                  </a-input>
                  <div class="flex" v-if="column.otherFormType === 'sort'" style="cursor: pointer">
                    <span style="margin-right: 2px" @click="sortChange(column, 'asc', confirm)"
                      :style="{ color: state[column.key].sort === 'asc' ? '#209EE4' : '' }">
                      <ArrowUpOutlined />正序
                    </span>
                    <span @click="sortChange(column, 'desc', confirm)"
                      :style="{ color: state[column.key].sort === 'desc' ? '#209EE4' : '' }">
                      <ArrowDownOutlined />倒序
                    </span>
                  </div>
                </div>
                <div>
                  <a-checkbox style="margin-bottom: 8px;" v-model:checked="state[column.key].checkAll"
                    :indeterminate="state[column.key].indeterminate" @change="onCheckAllChange(column)">
                    全选
                  </a-checkbox>
                  <div style="" v-if="state[column.key]?.options?.length > 0">
                    <a-checkbox-group class='boxGroup' v-model:value="state[column.key].checkedList"
                      :options="state[column.key].options" @change="onCheckChange(column)" />
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between;margin-top: 10px;">
              <a-button type="text" style="color: #209EE4" size="small" @click="handleReset(column)">
                清除所选内容
              </a-button>
              <a-button type="primary" size="small" @click="handleSearch(selectedKeys, confirm, column)">
                确定
              </a-button>
            </div>
          </div>
        </template>
      </BasicTable>
      <div class="table_btnC" v-if="tableData?.length > 0">
        <a-checkbox v-model:checked="allchecked" v-show="showBatchBtn || showOffline"
          @click="selectAllRows">全选</a-checkbox>
        <a-button v-auth="'batchEditTraining'" v-show="showBatchBtn" class="btn" @click='batchOperation'>批量指派</a-button>
        <a-button v-auth="'batchEditTraining'" class="btn" v-show="showOffline"
          @click='offlineInterview'>线下到面</a-button>
      </div>
    </div>
    <Modal @register="registerModal" @success="handleSuccess" :minHeight="100" />
    <!--批量指派-->
    <BatchModal ref="batchModalRef" @onSuccess="batchSuccess"></BatchModal>
    <!--入职-->
    <EntryModal ref="entryModal" @onSuccess="doReload()"></EntryModal>
    <!--转入试用、转正-->
    <EntryOnTrial ref="entryOnModal" @onSuccess="doReload()"></EntryOnTrial>
    <!--三方-->
    <ContractSecondInterview ref="secondModal" @onSuccess="doReload()"></ContractSecondInterview>
  </div>
</template>
<script lang="ts">//设置组件名称
import { defineComponent } from 'vue';
export default defineComponent({
  name: "todo"
});
</script>
<script lang="ts" setup>

import { ref, watch, onActivated, computed, nextTick } from 'vue';
import { BasicTable, useTable } from '@/components/Table';
import { allColumn } from "./components/data.ts";
import { selectOptions } from "@/views/ApplicationList/components/data.ts"
import { Button } from '@/components/Button'
import { message } from 'ant-design-vue';
import { useModal } from '@/components/Modal';
import Modal from '@/views/TrainList/components/Modal.vue';
import BatchModal from "@/views/ApplicationList/components/BatchModal.vue"
import EntryModal from "@/views/ApplicationList/components/EntryModal.vue";
import EntryOnTrial from "@/views/ApplicationList/components/EntryOnTrial.vue";
import { useUserStore } from '@/store/modules/user';
import { comStores } from '@/store/common/comStore';
import { getTodoList, getCount, todoExport, idList, schoolTotal } from "@/api/today-event/todo.ts";
import { useRoute, useRouter } from "vue-router";
import { RoleEnum } from '@/enums/roleEnum';
import getSelectApi from "@/api/applay/applicationList/self.ts";
import { downloadByData } from '@/utils/file/download';
import { offlineInterviewTypeList, onlineInterviewType, selectCommonConfig } from '@/api/applay/applicationList/self';
import { usePermission } from '@/hooks/web/usePermission';
import { getImageUrl } from "@/assets/common/common.ts";
import ContractSecondInterview from "../ApplicationList/components/ContractSecondInterview.vue";

const userStore = useUserStore();
const pageSize = ref<number>(15);
const { hasBtnPermission } = usePermission();
const store = comStores()
const route = useRoute();
const router = useRouter();
const activeKey = ref<string>("");
const batchModalRef = ref<any>(null)
const loading = ref<boolean>(false)
const { userRoleList } = store.userInFor;
let columns = ref<any>(allColumn.filter(item => item.condition?.find(el => el === activeKey.value)));
const mainType = '今日待办';
const currentCard = ref<any>({});
const activeTab = ref<string>("待处理")
const currentCardColor = ref<string>("");
const campus = ref<any>({});
const campusList = ref<any[]>([
])
const detailList = ref<any>([
  // { title: "24届招聘需求(人)", number: 0, key: 'recruitNum',tooptip:"" },
  { title: "入职(人)", number: 0, key: "allEntryNum", tooltip: "所有入职的数量" },
  { title: "已转正(人)", number: 0, key: "regularNum", tooltip: "【已转正】状态的数量" },
  // { title: "已代课(人)", number: 0, key: "haveClassNum" },
  // { title: "在岗-未请长假(人)", number: 0, key: "onDutyNum" },
  { title: "在职(人)", number: 0, key: 'onJobNum', tooltip: "【实习中】【试用中】【已转正】状态的合计数量（入职－离职－劝退）" },
  { title: "待入职-已签(人) ", number: 0, key: 'waitEntryNum', tooltip: "【待入职】状态的数量（应届已签三方或往届）" },
  { title: "待入职-待签(人)", number: 0, key: "waitSignEntryNum", tooltip: "【待签应约】【待签三方】状态的合计数量" },
  { title: "离职(人)", number: 0, key: 'departNum', tooltip: "【离职】状态的数量" },
  { title: "劝退(人)", number: 0, key: 'puaNum', tooltip: "【劝退】状态的数量" },
  // { title: "招聘完成度", number: 0, key: "completion" },
])
const rangeTime = ref<any>([])
interface CardOptions {
  style?: any,
  auth: string,
  label?: string,
  value: string,
  key?: string,
  show?: boolean,
  text: string,
  number?: number,
  icon?: string
}
const tabOptions = ref<CardOptions[]>([
  { auth: hasBtnPermission('workbenchWattingHandler'), text: '待处理', value: '待处理', },
  { auth: hasBtnPermission('workbenchHistoryRecord'), text: '历史记录', value: '历史记录' },
  { auth: hasBtnPermission('workbenchCampus'), text: '我的分校', value: '我的分校' },
  { auth: hasBtnPermission('workbenchMyTeam'), text: '我的团队', value: '我的团队' },
  { auth: hasBtnPermission('workbenchRecommendPost'), text: '推荐职能岗', value: '推荐职能岗' }
]);


const commonOptions = ref<CardOptions[]>([
  {
    style: { background: "#E7F6F5", border: "#4BBEB6" },
    icon: "icon-daifenpei",
    auth: hasBtnPermission('waitAllocation'), text: '待分配', value: '待分配', key: "waitShareCount",
  },
  {
    style: { background: "#FFF5EB", border: "#F0A03D" },
    icon: "icon-daiyuemian",
    auth: hasBtnPermission('waitAppointment'), text: '待约面', value: '待约面', key: "waitAgreeCount"
  },
  {
    style: { background: "#E9F6FD", border: "#209EE4" },
    icon: "icon-daimianshi",
    auth: hasBtnPermission('waitInterview'), text: '待面试', value: '待面试', key: "waitFaceCount"
  },
  {
    style: { background: "#FFF2EF", border: "#EF6748" },
    icon: "icon-daikaohe",
    auth: hasBtnPermission('waitAssess'), text: '待考核', value: '待考核', key: "waitExamCount"
  },
  {
    style: { background: "#E7F6F5", border: "#4BBEB6" },
    icon: "icon-weihuzhong",
    auth: hasBtnPermission('myMaintain'), text: '维护中', value: '维护中', key: "myPreserveCount",
  }
])
const cardOptions = ref<CardOptions[]>(commonOptions.value)

const historyOptions = ref<CardOptions[]>([
  {
    style: { background: "#E7F6F5", border: "#4BBEB6" },
    icon: "icon-daifenpei",
    auth: hasBtnPermission('filterHistory'), text: '筛选历史', value: '筛选历史', key: "screenHistoryCount",
  },
  {
    style: { background: "#FFF5EB", border: "#F0A03D" },
    icon: "icon-daiyuemian",
    auth: hasBtnPermission('appointmentHistory'), text: '约面历史', value: '约面历史', key: "agreeHistoryCount"
  },
  {
    style: { background: "#E9F6FD", border: "#209EE4 " },
    icon: "icon-daimianshi",
    auth: hasBtnPermission('interviewHistory'), text: '面试历史', value: '面试历史', key: "interviewHistoryCount"
  },
  {
    style: { background: "#FFF2EF", border: "#EF6748" },
    icon: "icon-daikaohe",
    auth: hasBtnPermission('assessHistory'), text: '考核历史', value: '考核历史', key: "examHistoryCount"
  },
  {
    style: { background: "#E7F6F5", border: "#4BBEB6" },
    icon: "icon-weihuzhong",
    auth: hasBtnPermission('maintainHistory'), text: '维护历史', value: '维护历史', key: "preserveHistoryCount",
  }
])
const activeCampus = ref<string>('待签应约');

const tableTabList = ref<{ text: string, number: number | string, key: string }[]>([

  { text: "待签应约", number: 0, key: "schoolAgreementCount" },
  { text: "待签三方", number: 0, key: "schoolSignCount" },
  { text: "待入职", number: 0, key: "schoolWaitEntryCount" },
  { text: "实习中", number: 0, key: "schoolPracticeCount" },
  { text: "试用中", number: 0, key: "schoolTryCount" },
  { text: "已转正", number: 0, key: "schoolRegularCount" },
  { text: "放弃", number: 0, key: "schoolDeclinedCount" },
  { text: "解约", number: 0, key: "schoolCancelCount" },
  { text: "离职", number: 0, key: "schoolDepartCount" },
  { text: "劝退", number: 0, key: "schoolOutCount" },
])
const activeTeam = ref<string>("实习中")
const teamList = ref<{ text: string, number: number | string, key: string }[]>([
  { text: "实习中", number: 0, key: 'teacherPracticeCount' },
  { text: "试用中", number: 0, key: 'teacherTryCount' },
  { text: "已转正", number: 0, key: 'teacherRegularCount' },
  { text: "离职", number: 0, key: 'teacherDepartCount' },
  { text: "劝退", number: 0, key: 'teacherOutCount' },
])
const showCampus = computed(() => {
  return activeTab.value == '我的分校'
})

const showTeam = computed(() => {
  return activeTab.value == '我的团队'
})

const showCard = computed(() => {
  return activeTab.value == '待处理' || activeTab.value == '历史记录'
})

const timeTitle = computed(() => {
  if (activeTab.value == '待处理') {
    if (activeKey.value == '待面试') {
      return "面试时间"
    }
    if (activeKey.value == '待考核') {
      return "考核时间"
    }
  }
  if (activeTab.value == '历史记录') {
    if (activeKey.value !== '维护历史') {
      return "操作时间"
    }
  }
  return '简历投递时间'
})

const showBatchBtn = computed(() => {  //展示批量指派
  const condition1 = ['待分配', '待面试', '待约面', '维护中']
  const condition2 = ['待入职', '实习中', '试用中', '已转正', '待签三方', '待签应约']
  return activeTab.value == '待处理' && condition1.find(el => el == activeKey.value) ||
    activeTab.value == '我的分校' && condition2.find(el => el === activeCampus.value) ||
    activeTab.value == '我的团队' && condition2.find(el => el === activeTeam.value);
})
const showOffline = computed(() => {
  const condition1 = ['待分配', '待面试', '待约面']
  return activeTab.value == '待处理' && condition1.find(el => el == activeKey.value)
})

const yDistance = computed(() => { //y的滚动距离
  let num = 700
  if (showCard.value) {
    num = 460
  } else if (showCampus.value) {
    num = 380
  } else if (showTeam.value) {
    num = 560
  }
  const scrollHeight = document.documentElement.scrollHeight;
  const extra = resultList.value.length > 0 ? 30 : 0
  const ratio = (num - extra) / 962
  return scrollHeight * ratio
})

const allchecked = ref<boolean>(false);
const [registerModal, { openModal: openModal }] = useModal();
const getTagClassStatus = (status) => {
  switch (status) {
    case "未开始":
      return 'tag-not-start';
    case "培训中":
      return 'tag-progress';
    case "已结束":
      return 'tag-over';
    default:
      return 'tag-normal';
  }
};



//新增和编辑成功后回调
function handleSuccess(data) {
  message.success(data.trainingNumberId ? '编辑成功' : '新增成功')
  doReload()
  //回来后关闭弹框
  allchecked.value = false
  openModal(false)
}


const batchSuccess = () => {
  doReload();
  allchecked.value = false
}
//表格操作
const resultList = ref<any>([]);
const tableData = <any>ref([])
const state = ref<any>({}) // 状态
const getTabData = async () => {

  const { userName, userId } = store.userInFor
  let branchSchool = null
  if (activeTab.value == '我的分校') {
    branchSchool = campus.value.label.replace('分校', '')
  }
  const data = await getCount({
    userId, userName, branchSchool
  });
  tableTabList.value.forEach(el => {
    el.number = data[el.key] || 0
  })
  teamList.value.forEach(el => {
    el.number = data[el.key]
  })
  historyOptions.value.forEach(el => {
    el.number = data[el.key]
  })
  commonOptions.value.forEach(el => {
    el.number = data[el.key]
  })
  cardOptions.value.forEach(el => {

    el.number = data[el.key]
  })
}
getTabData()
const pageReloadStatus = ref(false)
const getOptions = async (item: any) => {
  let temp = {}
  let branchSchool = null
  if (activeTab.value == '我的分校') {
    branchSchool = campus.value.label.replace('分校', '')
  }
  if (item.requestApi === 'selectUserByRole') {
    temp = {
      request: item.requestType,
      type: 0
    }
  } else if (item.requestApi === 'selectCommonConfig') {
    temp = {
      type: 1,
      level: item.requestType,
      branchSchool: branchSchool
    }
  } else if (item.requestApi === 'selectCommonConfigDetail') {
    temp = { type: item.requestType }
  }
  if (item.requestApi === 'tabulationStatusList') {
    temp = {
      type: activeTab.value,
      process: currentCard.value.text == '推荐职能岗' ? '' : currentCard.value.text
    }
  }
  const data = await getSelectApi[item.requestApi](temp);
  // item.requestApi == "selectUserByRole" ? el.label :

  const list = data.data?.map((el) => {
    return {
      label: el.label || el,
      value: el.value || el,
    };
  });
  if (item.requestApi == "selectUserByRole" && item.field == "pr.labelUpdateOperator" || item.field == "pr.operator") {
    // &&item.requestType =='推荐职能岗'
    console.log(item, 'item')
    list.forEach(a => {
      a.value = a.label
    })
  }
  return unique(list, item.requestType)
}
function unique(arr, requestType) {
  const res = new Map();
  let list = arr.filter((a) => !res.has(a.label) && res.set(a.label, 1))
  if (requestType == '2') {
    list = list.filter(el => el.label != '小低' && el.label != '小高')
  }
  return list
}


const setTableHeader = async () => {
  let optionsList = selectOptions
  Object.keys(optionsList).forEach(async (key) => {
    if (optionsList[key]?.requestApi) {
      let res = await getOptions(optionsList[key]);
      optionsList[key].option = res
      for (let i = 0; i < allColumn.length; i++) {
        let item = allColumn[i]
        state.value[item.key] = {}
        state.value[item.key].formType = item.formType
        if (item.formType === 'select') {
          if (item.options?.length > 0) {
            state.value[item.key].options = item.options
            state.value[item.key].cacheOptions = item.options
          } else {
            let option = optionsList[item.key] ? optionsList[item.key].option : []
            state.value[item.key].options = option
            state.value[item.key].cacheOptions = option
          }
          if (item?.field) {
            optionsList[item.key].field = item.field
          }
          if (item.key === 'interviewOfficer') {
            state.value[item.key].options = state.value[item.key].options.map(el => {
              return {
                label: el.label,
                value: el.label
              }
            })
            state.value[item.key].cacheOptions = state.value[item.key].options
          }

        } else if (item.formType === 'input') {
          state.value[item.key].inputValue = ''
        } else if (item.formType === 'time') {
          state.value[item.key].timeParams = item.timeParams
        }
        state.value[item.key].placeholder = optionsList[item.key] ? optionsList[item.key].placeholder : ''
      }
    }
  })

}
const getSchool = async () => {
  const data = await selectCommonConfig({ type: 1, level: 1 }); //入职分校
  console.log(data, 'sc')
  if (data && data.data.length > 0) {
    campusList.value = data.data;
    campus.value = data.data[0]
    return
  }
  campusList.value = [];
  campus.value = {}
}


const getTableData = (param) => {
  requestPageData.value = param;
  return getTodoList(gerRequestParames())
}
// setColumns
const [registerTable, { setColumns, reload, setPagination, getForm, getPaginationRef, getSelectRows, setSelectedRowKeys, clearSelectedRowKeys }] = useTable({
  title: '',
  api: getTableData,
  columns: columns,
  formConfig: {
    labelWidth: 120,
    autoSubmitOnEnter: true,
    showAdvancedButton: true,
    autoAdvancedLine: 4,
    showSubmitButton: false,
  },
  pagination: {
    pageSize: 15,
    defaultPageSize: 15, // 设置每页显示 50 条数据
    pageSizeOptions: ['10', '15', '20', '50'],
  },
  rowSelection: {
    type: 'checkbox',
    getCheckboxProps(record) {
      if (record.status === 2) {
        return { disabled: true };
      } else {
        return { disabled: false };
      }
    },
  },
  clearSelectOnPageChange: true,
  clickToRowSelect: false,
  useSearchForm: false,
  showTableSetting: false,
  showIndexColumn: false,
  bordered: true,
  canResize: false,
  beforeFetch(info) {
    loading.value = true

  },
  sortFn(sortInfo) {
  },
  afterFetch(list) {
    if (getSelectRows().length === 0) {
      allchecked.value = false
    }
    tableData.value = list
    if (!pageReloadStatus.value) {
      pageReloadStatus.value = true
      setTableHeader()
    }
    loading.value = false
    store.getMenuCountList()
  }
})
onActivated(async () => {
  let cardList: any = [];
  if (!activeKey.value) {
    cardList = cardOptions.value.filter(item => item.auth);
    if (cardList && cardList.length > 0) {
      currentCard.value = cardList[0]
    } else {
      currentCard.value = cardOptions[0]
    }
  }
  if (!activeTab.value) {
    const list = tabOptions.value.filter(item => item.auth);
    console.log(list)
    if (list && list.length > 0) {
      activeTab.value = list[0].text;
      handleTabClick(activeTab.value);
    } else {
      activeTab.value = tabOptions[0].text;
    }
  }
  getSchool();//获取分校
  await doReload(gerRequestParames());
  if (cardList.length > 0) {
    handleCardClick(cardList[0])
  }
})

const basicParam = () => {
  const { userId, userName } = store.userInFor;
  let process = ""
  let branchSchool = null
  if (activeTab.value == '待处理' || activeTab.value == '历史记录') {
    process = activeKey.value
  } else if (activeTab.value == '我的分校') {
    process = activeCampus.value
    branchSchool = campus.value.label.replace('分校', '')
  } else if (activeTab.value == '我的团队') {
    process = activeTeam.value
  }
  return {
    userId: userId,
    userName: userName,
    // identity: activeKey.value,
    process: process,
    type: activeTab.value,
    validStartTime: rangeTime.value[0],
    validEndTime: rangeTime.value[1],
    branchSchool,
    // tab:activeCampus.value //  我的分校搜索项
  }

}
watch(() => currentCard.value, (val) => {
  if (val) {
    currentCardColor.value = val.style?.border;
    activeKey.value = val.text
  }
}, { deep: true })

watch(() => activeTab.value, (val) => {
  if (val === '待处理' || val == '历史记录') {
    cardOptions.value = val === '历史记录' ? historyOptions.value : commonOptions.value;
    currentCard.value = cardOptions.value.find(el => !!el.auth);
  } else if (val === '我的分校') {
    currentCard.value = { text: activeCampus.value, value: activeCampus.value }
  } else {
    currentCard.value = { text: val, value: val }
  }
})

watch(() => activeCampus.value, (val) => {
  currentCard.value = { text: val, value: val }
})


const gerRequestParames = () => {
  const req: any = {
    ...diyRequestData.value, // 自定义请求
    ...getTableHeaderRequest(), // 表头筛选
    ...requestPageData.value,
    ...basicParam()
  }
  // const req: any = parames
  return req
}
const getTableHeaderRequest = () => {
  const obj = {}
  Object.keys(state.value).forEach((i: any) => {
    if (state.value[i].formType === 'select' && state.value[i].checkedList && state.value[i].checkedList.length > 0) {
      // 如果是下拉框的话
      obj[i] = state.value[i].checkedList
    } else if (state.value[i].formType === 'input' && state.value[i].inputValue) {
      // 如果是输入框的话
      obj[i] = state.value[i].inputValue
    } else if (state.value[i].formType === 'time' && state.value[i].timeRange) {
      obj[state.value[i].timeParams[0]] = state.value[i].timeRange[0]
      obj[state.value[i].timeParams[1]] = state.value[i].timeRange[1]
    }
  })
  return obj
}

const handleCardClick = async (item) => {
  if (!item) return
  currentCard.value = item;
  const column = allColumn.filter(a => a.condition?.find(el => el === item.text));
  setColumns(column)
  clearSelectedRowKeys()
  const param = {
    requestApi: 'tabulationStatusList',
    requestType: mainType,
    process: item.text
  }
  await doReload()
  const res = await getOptions(param);
  state.value.applicationStages.options = res
  state.value.applicationStages.cacheOptions = res
}

const handleTabClick = async (val) => {
  activeTab.value = val;
  console.log(val, '===>val')
  if (val == '待处理' || val == '历史记录') {
    currentCard.value = cardOptions.value[0];
    setTimeout(() => {
      handleCardClick(currentCard.value);
    }, 0);
  } else if (val == '我的分校') {
    handleTableTabChange(tableTabList.value[0]);
    setTableHeader()
    getSchoolInfo()
  } else if (val == '我的团队') {
    activeTab.value = '我的团队'
    handleTeamChange(teamList.value[0]);
  } else if (val == '推荐职能岗') {
    activeTab.value = '推荐职能岗'
    handleCardClick({ text: '推荐职能岗', value: '推荐职能岗', key: "recommendJobCount" })
  }
}
const handleTeamChange = (item) => {
  activeTeam.value = item.text;
  handleCardClick(item)
}
const schoolTotalList = ref<any>([]);
const currentSchoolTotal = ref<any>({})
const getSchoolInfo = async () => {
  const data = await schoolTotal();
  if (data && data.length > 0) {
    schoolTotalList.value = data;
    if (campus.value.value) {
      currentSchoolTotal.value = data.find(el => el.school == campus.value.value);
    } else {
      currentSchoolTotal.value = data[0]
    }
    resetDetail()
  }
}

const resetDetail = () => {
  detailList.value.forEach(el => {
    el.number = currentSchoolTotal.value[el.key] || 0
  })
}


const handleReset = (column) => {
  if (column.formType === 'select') {
    state.value[column.key].checkAll = false;
    state.value[column.key].indeterminate = false;
    state.value[column.key].checkedList = [];
  } else if (column.formType === 'input') {
    state.value[column.key].inputValue = ''
  } else {
    state.value[column.key].timeRange = []
  }
};
const handleInputChange = (event, column) => {
  let searchText = event.target.value;
  state.value[column.key].options = fuzzySearch(column, searchText);
};
function fuzzySearch(column, searchTerm: string = '') {
  // 将搜索词转换为小写，以便进行不区分大小写的比较
  const array = state.value[column.key].cacheOptions
  const lowerSearchTerm = searchTerm.toLowerCase();
  // 使用 filter 方法返回与搜索词匹配的项
  return array.filter(item => {
    // 将 label 转换为小写，并检查是否包含搜索词
    return item.label.toLowerCase().includes(lowerSearchTerm);
  });
}
const onCheckChange = (columns) => {
  if (state.value[columns.key].checkedList.length && (state.value[columns.key].checkedList.length === state.value[columns.key].options.length)) {
    state.value[columns.key].checkAll = true
  } else {
    state.value[columns.key].checkAll = false
  }
}
const focusFalg = ref<boolean>(false)
const handleBlur = (item) => {
  setTimeout(() => {
    if (!focusFalg.value) {
      item.showHistory = false;
    }
  }, 100);
}
const handleFocus = (item) => {
  focusFalg.value = false
  item.showHistory = true;
  const list = JSON.parse(localStorage.getItem('todo' + item.key) || '[]')
  item.historyList = list.slice(0, 5)
}

const removeHistory = (item, v) => {
  focusFalg.value = true
  item.historyList = item.historyList.filter(el => el !== v);
  localStorage.setItem('todo' + item.key, JSON.stringify(item.historyList))
}
//点击确定


const handleSearch = async (selectedKeys, confirm, column) => {
  column.showHistory = false
  focusFalg.value = false
  if (column.history && state.value[column.key].inputValue) {
    column.historyList.unshift(state.value[column.key].inputValue);
    localStorage.setItem('todo' + column.key, JSON.stringify([...new Set(column.historyList)].slice(0, 5)))
  }
  confirm();
  getResult(column);
  // 更新表格数据
  doReload(gerRequestParames())
  // await reload(gerRequestParames());
  // getTabData()
};
const getResult = (column) => {
  const current = state.value[column.key];
  const checkedList = current.checkedList;
  if (column.formType === 'select') {
    state.value[column.key].requestValueList = checkedList
  } else if (column.formType === 'input') {
    state.value[column.key].requestValue = current.inputValue
  } else if (column.formType === 'timeRange') {
    state.value[column.key].requestValue = current.timeRange
  }
  const options = current.options;
  let result: any = [];
  if (checkedList?.length > 0) {
    options.forEach((el: any) => {
      checkedList.forEach((item) => {
        if (el.value === item) {
          result.push(el.label);
        }
      });
    });
  }
  let isExistedRow = resultList.value.find((el) => el.key == column.key);
  if (checkedList?.length === 0 && isExistedRow) {
    resultList.value = resultList.value.filter((el) => el.key != column.key);
    return;
  }
  const resStr = column.formType === 'select' ? (result.length > 3 ? result?.slice(0, 3).join('、') + ' 等' : result.join('、')) :
    column.formType === 'input' ? current.inputValue : current.timeRange.join('-')
  const finalMap = {
    label: column.title,
    key: column.key,
    value: `${column.title}：${resStr}`,
  };
  if (isExistedRow) {
    isExistedRow.value = finalMap.value;
  } else if (!isExistedRow && resStr) {
    resultList.value.push(finalMap);
  }
};
//全选的时候获取参数
const onCheckAllChange = (column) => {
  state.value[column.key].indeterminate = false;
  if (state.value[column.key].checkAll) {
    const options = state.value[column.key].options;
    state.value[column.key].checkedList = options.map((el) => el.value);
  } else {
    state.value[column.key].checkedList = [];
  }
};

const handleTimeChange = () => {
  if (rangeTime.value) {
    doReload()
  } else {
    rangeTime.value = [null, null];
    doReload()
  }
}

const remove = (item) => {
  if (state.value[item.key].formType === 'input') {
    state.value[item.key].requestValue = '';
    state.value[item.key].inputValue = '';
  } else if (state.value[item.key].formType === 'time') {
    state.value[item.key].timeRange = [];
  } else {
    state.value[item.key].checkedList = [];
  }
  state.value[item.key].indeterminate = false;
  resultList.value = resultList.value.filter((v) => v.key !== item.key);
  doReload()
};
const diyRequestData = ref<any>({});
const requestPageData = ref<any>({})
const keyWords = ref<string>('')

const removeAll = () => {
  resultList.value.forEach((item) => {
    state.value[item.key].checkedList = [];
    state.value[item.key].indeterminate = false;
    state.value[item.key].checkAll = false;
    state.value[item.key].indeterminate = false;
    state.value[item.key].checkedList = [];
    state.value[item.key].inputValue = '';
    state.value[item.key].timeRange = [];
    state.value[item.key].requestValueList = [];
    state.value[item.key].requestValue = '';
  });
  if (sortingFields.value.length > 0) {
    sortingFields.value.forEach(item => {
      state.value[item.key].sort = '';
    })
  }
  resultList.value = [];
  diyRequestData.value = {}
  keyWords.value = ''
  sortingFields.value = []
  rangeTime.value = []
  doReload()
};
const searchKeyWords = (e) => {
  delete diyRequestData.value.keyWords
  diyRequestData.value = {
    keyWords: keyWords.value,
    ...diyRequestData.value
  }

  doReload();
}

const sortingFields = ref<any>([])
const sortChange = (column, value, confirm) => {
  console.log('selectOptions-----------', state.value)
  state.value[column.key].sort = value
  if (sortingFields.value.length > 0) {
    const list = sortingFields.value.filter(item => item.field === column.field)
    if (list.length > 0) {
      if (list[0].order === value) {
        sortingFields.value = sortingFields.value.filter(item => item.field !== column.field)
        state.value[column.key].sort = ''
      } else {
        list[0].order = value
      }
    } else {
      sortingFields.value.push({
        field: column.field,
        order: value,
        key: column.key
      })
    }
  } else {
    sortingFields.value.push({
      field: column.field,
      order: value,
      key: column.key
    })
  }
  diyRequestData.value = {
    sortingFields: sortingFields.value.map(item => {
      return {
        field: item.field,
        order: item.order
      }
    }),
  }
  doReload();
}
const doReload = async (param = null) => {
  await reload(param);
  getTabData()
  if (activeTab.value == '我的分校') {
    getSchoolInfo()
  }
}
// 选中所有行
function selectAllRows() {
  if (!allchecked.value) {
    const allKeys = tableData.value.map((row: any) => row.id)
    setSelectedRowKeys(allKeys)
  } else {
    clearSelectedRowKeys()
  }
}

//批量操作
const batchOperation = () => {
  let selects = getSelectRows();
  console.log(selects, 'selects')
  // 待约面:interviewUserName
  // 待面试:interviewer
  // 待考核:examineOfficer

  const isList = [
    { key: '待约面', value: "interviewUserName" },
    { key: '待分配', value: "" },
    { key: '待面试', value: "interviewer" },
    { key: '待考核', value: "" },
    { key: '维护中', value: "preserveUserName" },
    { key: '待签三方', value: "preserveUserName" },
  ];
  if (selects.length > 0) {
    const resumeIds = selects.map(item => {
      return {
        id: item.id,
        name: item[isList.find(el => el.key === activeKey.value)?.value || 'preserveUserName']
      }
    })
    batchModalRef.value.open({
      resumeIds,
      type: activeKey.value === '待面试' ? 'msg' : isList.find(el => el.key === activeKey.value)?.value == 'interviewUserName' ? 'ymhr' : 'whhr'
    })
  } else {
    message.error('你还没选择数据');
  }
}
//批量线下面试
const offlineInterview = () => {
  let selects = getSelectRows();
  if (selects.length > 0) {
    const list = selects.map(item => item.id)
    getOfflineInterviewTypeList(list)
  } else {
    message.error('你还没选择数据');
  }
}
// 培训详情

const getOfflineInterviewTypeList = async (list) => {
  const { userInFor } = store
  const temp = { resumesIds: list, operator: userInFor.userName }
  const data = await offlineInterviewTypeList(temp)
  if (data && data.code === '10000') {
    message.success("操作成功")
    doReload()
  } else {
    message.error(data.msg)
  }
}
//取消面试
const getOnlineInterviewType = async (list: Object) => {
  const { userInFor } = store
  const temp = { resumeId: list.id, operator: userInFor.userName }
  const data = await onlineInterviewType(temp)
  if (data && data.code === '10000') {
    message.success("操作成功")
    doReload()
  } else {
    message.error(data.msg)
  }
}



const getTabulationExport = async () => {
  const data = await todoExport(gerRequestParames());
  console.log(data, 'data')
  await downloadByData(data, activeKey.value);
  message.success("下载成功")
}
const getIdList = async (item) => {
  console.log(gerRequestParames(), 'gerRequestParames()')
  sessionStorage.setItem('cacheParam', JSON.stringify(gerRequestParames()))
  const data = await idList(gerRequestParames());
  if (data && data.length > 0) {
    sessionStorage.setItem("cacheResumeList", JSON.stringify(data));
    const current = data.find(el => el.value == item.id);
    sessionStorage.setItem("cacheResume", JSON.stringify(current))
  } else {
    sessionStorage.setItem("cacheResume", "{}")
    sessionStorage.setItem("cacheResumeList", '[]');
  }
}
async function goApplicationDetail(item: any) {
  await getIdList(item)
  router.push({ path: '/applicationDetails/cvDetail', query: { id: item?.id, withnext: "true", from: "todo" } })
}

const campusChange = async (item) => {
  campus.value = item;
  currentSchoolTotal.value = schoolTotalList.value.find(el => el.school == item.label) || {};
  setTableHeader()
  await doReload()
  resetDetail();
}
const handleTableTabChange = async (item) => {
  console.log(item, '==>item')
  activeCampus.value = item.text;
  setTimeout(() => {
    handleCardClick(item);
  }, 0)
}
/*入职*/
const entryModal = ref<any>(null)
const entrySession = (item: any) => {
  console.log(item, '====>item')
  entryModal.value.open({
    info: item
  })
}
/*转入试用*/
const entryOnModal = ref<any>(null)
const entryOnSession = (item: Object, type: String) => {
  entryOnModal.value.open({
    info: item,
    type
  })
}

/*完成三方*/
const secondModal = ref<typeof ContractSecondInterview>(ContractSecondInterview)
const sendSession = (item: any) => {
  secondModal.value.open({
    info: item,
    useItemInfo: true
  })
}

const openUrl = (item) => {
  window.open(item.interviewUrl)
}
</script>
<style lang="less" scoped>
:deep(.ant-tabs-nav) {
  margin-bottom: 0 !important;
}

:deep(.boxGroup) {
  display: flex;
  flex-direction: column;
}

.common-style {
  position: relative;
  background: #ffffff !important;
  padding: 16px 20px;
  border-radius: 10px;
}

#trainList {
  .main-content {
    padding: 0 20px !important;
    margin-bottom: 16px !important;

    .search {
      display: flex;
      justify-content: space-between;
      margin-bottom: 28px;

      .search-l {
        color: #333333;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;

        >span {
          font-size: 14px;
          font-weight: normal;
          margin-left: 10px;
        }
      }
    }
  }

  .bottom_table {

    .title {
      font-size: 20px;
      font-weight: bold;

      span {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 16px;
      }
    }

    .table_btnC {
      display: flex;
      align-items: baseline;
      position: absolute;
      bottom: 15px;
      left: 20px;

      .btn {
        margin-left: 8px;
      }
    }

    .result-wrap {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      align-items: center;
      min-height: 30px;
      line-height: 30px;
      //background: #fff;
      border-radius: 4px;

      .result-item {
        flex: 1;
        font-size: 12px;
        margin-right: 15px;
        border: 1px solid #ccc;
        padding: 3px 10px;
        border-radius: 4px;
        box-sizing: border-box;
      }

      .result-clear {
        color: #209ee4;
        cursor: pointer;
        font-size: 14px;
        border: 1px solid;
        padding: 1px 5px;
      }
    }

  }

}

.tipes {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 15px;
}


.btn-hover,
.btn-hover:hover {
  color: #209EE4;
}

:deep(.btn-hover>span:hover) {
  text-decoration: underline;
}

.custom-tag {
  padding: 4px 8px;
  border: none;
}

.tag-not-start {
  color: #FF4242;
  background-color: rgba(255, 66, 66, 0.1);
}

.tag-progress {
  color: #16C716;
  background: rgba(22, 199, 22, 0.1);
}

.tag-over {
  color: #999999;
}

.tag-normal {
  color: #F0A03D;
  background: rgba(240, 160, 61, 0.1);
}

.search-r {
  display: flex;
  width: 100%;
  justify-content: space-between;

  .search-input {
    width: 368px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(179, 192, 200, 0.3);
    color: #B3C0C8;

    ::placeholder {
      color: #B3C0C8;
      font-weight: 400;

    }

    .search-i-i {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }

  .search-b-r {
    border-radius: 3px;
    border: 1px solid rgba(179, 192, 200, 0.3);
    margin: 0 4px;

    &:nth-of-type(1) {
      margin: 0 8px;
      margin-left: 9px;
      background-color: #FFFFFF;
      color: #B3C0C8;
    }

    .search-i-r {
      border-radius: 3px;
      margin-right: 4px;
    }
  }

  .f-r-r {
    display: flex;
    flex-direction: row-reverse;
  }
}

.graduate {
  color: #209EE4;
  border: none;
  background-color: rgba(32, 158, 228, 0.15);
}

.graduate-other {
  color: #F0A03D !important;
  background-color: rgba(240, 160, 61, 0.15) !important;

  &:hover {
    color: #F0A03D !important;
  }
}

.status-name {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-block;
  font-size: 11px;
  text-align: center;
  line-height: 18px;
  margin-right: 5px;

}

.child1 {
  color: #FF4242;
  background: rgba(255, 66, 66, 0.1);
}

.child2 {
  color: #209EE4;
  background: rgba(32, 158, 228, 0.1);
}

.child3 {
  color: #F0A03D;
  background: rgba(240, 160, 61, 0.1);
}

.graduate {
  color: #209EE4;
  border: none;
  background-color: rgba(32, 158, 228, 0.15);
}

.filter-dropdown {
  padding: 8px;
  min-height: 50px;
  max-height: 300px;
  overflow-x: auto;
  box-sizing: border-box;

  .reset-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .reset-input {
      height: 32px;
      width: 140px;
    }
  }
}

.user-name {
  color: #209EE4;
  cursor: pointer;

  &:hover {
    text-decoration-line: underline;
  }
}

.history-wrap {
  background: #FFFFFF;
  margin-top: 4px;
  box-shadow: 0px 0px 4px 0px rgba(4, 50, 75, 0.3);
  border-radius: 4px 4px 4px 4px;
  padding: 5px 17px;
  box-sizing: border-box;

  .history-wrap-item {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: space-between;

    .history-wrap-close {
      display: block;
    }

    &:hover {
      color: #209ee4;

      .history-wrap-close {
        display: block;
      }
    }
  }
}

.reset-btn {
  &:hover span {
    color: #48bbf0 !important;
  }
}

.card-wrap {
  display: grid;
  height: 136px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;

  .card-item {
    position: relative;
    background: #E7F6F5;
    min-width: 200px;
    border-radius: 5px;
    cursor: pointer;
    padding: 25px 24px;
    box-sizing: border-box;
    border: 1px solid #fff;
    display: flex;
    justify-content: space-between;

    .card-item-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .icon-box {
        width: 32px;
        height: 32px;
        border-radius: 3px 3px 3px 3px;
        text-align: center;
        line-height: 32px;
        color: #fff;

        .iconfont {
          font-size: 24px;
        }
      }
    }

    .card-item-right {
      display: flex;
      align-items: flex-end;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      line-height: 20px;

      .unit {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 15px;
      }
    }
  }
}

.campus {
  margin-bottom: 16px;

  .box {
    height: 86px;
    background: #F5F7FB;
    border-radius: 10px;
    margin-top: 21px;
    padding: 14px 36px;
    box-sizing: border-box;
    display: flex;

    .box-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: #333;
      font-size: 14px;
      font-weight: 400;

      &:first-child {
        padding-left: 0;
      }

      .box-item-number {
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        margin-top: 10px;
        line-height: 17px;
        text-align: left;
      }

      .title-wrap {
        position: relative;

        .tips {
          margin-left: 5px;
          cursor: pointer;
        }
      }
    }
  }
}

.table-tab-wrap {
  display: flex;
  margin: 16px 0;

  .table-tab-wrap-item {
    padding: 0 16px;
    box-sizing: border-box;
    border-right: 1px solid;
    font-size: 16px;
    color: #a7b7cb;
    line-height: 19px;
    cursor: pointer;

    &:last-child {
      border: none;
    }

    &:first-child {
      padding-left: 0;
    }
  }
}

.card-active {
  border: 1px solid v-bind(currentCardColor) !important;
}

.active-table-tab {
  font-weight: 600;
  color: #333333 !important;
}
</style>